BASIC PROJECTS USING HTML AND CSS

A parallax website

A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website.

Take help from this links

Portfolio

With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account.

Take help from this links

A Tribute Page

Make a webpage writing about that person adding his/her image. On the top of the webpage, add the image and name of the person and below that give layout for the rest of the details. You can use paragraphs, lists, links, images .

Take help from this links

Event and Conferrence website

You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, venue and schedule at the top in the header section.

Take help from this links

Music stor page

Add a suitable background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, links, images and some description about the collection of songs available.

Take help from this links

Technical documentation

Divide the whole webpage into two sections. The left side creates a menu with all the topics listed from top to bottom. Right side you need to mention the documentation or description for the topics.

Take help from this links

Survey form

. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form.

Take help from this links

Css custom checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

Take help from this links

Css image slider

An Image Slider is an design element used to display videos and images on a website. Like a slideshow, Image Sliders show one video or image at a time. The content changes when visitors click to see the next slide, or it changes automatically after a few seconds.

Take help from this links

Progress bar

Progress bars are used to show progress of a task. For example, when you are uploading or downloading something from the internet, it is better to show the progress of download/upload to the user. In android there is a class called ProgressDialog that allows you to create progress bar.

Take help from this links

Hover button

Alternatively referred to as mouseover or mouse hover, hover describes the act of moving a mouse pointer over a clickable object, but not actually clicking the left or right mouse button

Take help from this links

Circle menu

A circle menu (also known as a radial menu, round menu, circular menu) is a creative menu design concept that arranges the sub-menu items around a circle or arc style menu toggle button.

Take help from this links

Facebook Emoji Reactions

Reactions are an extension of the Like Button to give people more ways to share their reaction to a post in a quick and easy way. The collection of Reactions includes Like, Love, Care, Haha, Wow, Sad and Angry.

Take help from this links

Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a button. Within a segmented control, all segments are usually equal in width. Like buttons, segments can contain text or images.

Take help from this links

Select Box

The element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

Take help from this links

Drop Menu

A drop-down menu is a list of items that appear whenever a piece of text or a button is clicked. This is a graphical approach presented to users from which they can choose a value from the list presented

Take help from this links

radio buttons

Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label.

Take help from this links

Navigation Overlay

They allow you to show new content on top of other content. Overlays are very similar to links, except they have a transparent background and appear on top of the original page

Take help from this links
load more